<!--
 * @Author: Cenven
 * @Date: 2021-06-25 15:42:44
 * @Description: 北京泓深教育发展有限公司
 * @Descripttion: 
 * @version: @Lastest
 * @LastEditTime: 2021-09-28 14:14:49
 * @CopyRight: 北京泓深教育发展有限公司
-->
<template>
  <div class="question-bank">
    <header class="sort-menu-con">
      <div class="sort-menu-box">
        <dl :class="['sort-menu', fold.one ? 'max_height' :'', 'clearfix']">
          <dt>专业类型：</dt>
          <dd :class="[filterMajor.oneLevelMajor == 'all' ? 'selectd' : '']" @click="menuHandle('oneLevelMajor','all')">全部</dd>
          <dd :class="[filterMajor.oneLevelMajor == item.id ? 'selectd' : '']" v-for="(item,index) in oneMajorList" :key="item.id" @click="menuHandle('oneLevelMajor',item.id)">{{ item.majorName }}</dd>
          <Icon @click="fold.one = !fold.one" v-if="fold.one" class="fold" size="16" type="ios-arrow-down" />
          <Icon @click="fold.one = !fold.one" v-else class="fold" size="16" type="ios-arrow-up" />
        </dl>
        <dl :class="['sort-menu', fold.two ? 'max_height' :'', 'clearfix']">
          <dt>学科类型：</dt>
          <dd :class="[filterMajor.twoLevelMajor == 'all' ? 'selectd' : '']" @click="menuHandle('twoLevelMajor','all')">全部</dd>
          <dd :class="[filterMajor.twoLevelMajor == item.id ? 'selectd' : '']" v-for="(item,index) in twoMajorList" :key="item.id" @click="menuHandle('twoLevelMajor',item.id)">{{ item.majorName }}</dd>
          <Icon @click="fold.two = !fold.two" v-if="fold.two" class="fold" size="16" type="ios-arrow-down" />
          <Icon @click="fold.two = !fold.two" v-else class="fold" size="16" type="ios-arrow-up" />
        </dl>
        <dl :class="['sort-menu', fold.three ? 'max_height' :'', 'clearfix']">
          <dt>课程类型：</dt>
          <dd :class="[filterMajor.threeLevelMajor == 'all' ? 'selectd' : '']" @click="menuHandle('threeLevelMajor','all')">全部</dd>
          <dd :class="[filterMajor.threeLevelMajor == item.id ? 'selectd' : '']" v-for="(item,index) in threeMajorList" :key="item.id" @click="menuHandle('threeLevelMajor',item.id)">{{ item.majorName }}</dd>
          <Icon @click="fold.three = !fold.three" v-if="fold.three" class="fold" size="16" type="ios-arrow-down" />
          <Icon @click="fold.three = !fold.three" v-else class="fold" size="16" type="ios-arrow-up" />
        </dl>
      </div>
    </header>
    <div class="question-container">
        <div class="question-left">
          <div class="filter_header">
            <span :class="['comprehensive_ranking',search_parameter == 'default' ? 'selectd':'']" @click="filterHandle('default')">综合推荐</span>
            <span>&emsp;&ensp;&ensp;|</span>
            <span :class="['price_high',search_parameter == 'price desc' ? 'price_desc': search_parameter == 'price asc' ? 'price_asc':'']" @click="filterHandle('price')">价格</span>
            <span>&ensp;&ensp;|&emsp;&ensp;&ensp;</span>
            <span :class="['sales_volume',search_parameter == 'studentSum desc' ? 'selectd':'']" @click="filterHandle('studentSum')">人气</span>
          </div>
          <div class="question_bank_list">
            <question-bank-card :item="item" v-for="(item,index) in questionBankList" :key="item.id"></question-bank-card>
          </div>
        </div>
        <div class="question-right">
          <hot-course></hot-course>
        </div>
    </div>
    <div class="pagination" v-if="questionBank.total > 12">
        <Page
          :total="questionBank.total"
          :current="questionBank.page"
          :page-size="questionBank.pageSize"
          @on-change="handleChangePage"
        ></Page>
      </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import {
  getQuestionBankList,
  getQuestionMajorList
} from "~/api/v2-question-bank/question-bank";
import HotCourse from "~/components/pc/HotCourse";
import QuestionBankCard from "~/components/pc/QuestionBankCard";
export default {
  name: "question-bank",
  components: {
    HotCourse,
    QuestionBankCard
  },
  data() {
    return {
        majorList:[],
        filterMajor:{
            oneLevelMajor:'all',
            twoLevelMajor:'all',
            threeLevelMajor:'all',
        },
        /* 题库列表 */
        questionBankList: [],
        /* 题库分页 */
        questionBank:{
          page:1,
          pageSize:12,
          total:0
        },
        search_parameter:'',
        price:'',
        fold:{
          one:true,
          two:true,
          three:true,
        }
    };
  },
  computed: {
      oneMajorList(){
          return this.majorList.filter(item=>{
              return item.levels == 1;
          })
      },
      twoMajorList(){
          if(this.filterMajor.oneLevelMajor == 'all'){
            return this.majorList.filter(item=>{
                return item.levels == 2;
            })
          }else{
              return this.majorList.filter(item=>{
                return item.levels == 2 && this.filterMajor.oneLevelMajor == item.parentId;
            })
          }
          
      },
      threeMajorList(){
          if(this.filterMajor.oneLevelMajor == 'all' && this.filterMajor.twoLevelMajor == 'all'){
            return this.majorList.filter(item=>{
                return item.levels == 3;
            })
          }else if(this.filterMajor.oneLevelMajor != 'all' && this.filterMajor.twoLevelMajor == 'all'){
              let twoArr = this.twoMajorList.map(item=>item.id);
              return this.majorList.filter(item=>{
                return item.levels == 3 && twoArr.includes(item.parentId);
            })
          }else if(this.filterMajor.twoLevelMajor != 'all'){
              let twoArr = this.twoMajorList.map(item=>item.id);
                return this.majorList.filter(item=>{
                    return item.levels == 3 && this.filterMajor.twoLevelMajor == item.parentId;
                })
          }
      },
  },
  watch: {},
  methods: {
      ...mapMutations(["SET_IS_LOADING"]),
      // 题库分页
      handleChangePage(page) {
        this.questionBank.page = page;
        this.getQuestionBankMajors();
      },
      // 条件过滤
      filterHandle(type){
        if(type == 'default'){
          this.search_parameter = 'default';
          this.price = '';
        }else if(type == 'price'){
          if(this.price == 'desc'){
            this.search_parameter = 'price desc';
            this.price = 'asc';
          }else{
            this.search_parameter = 'price asc';
            this.price = 'desc';
          }
        }else if(type == 'studentSum'){
          this.search_parameter = 'studentSum desc';
          this.price = '';
        }
        let majorId = this.getMenuCurrentMajorId();
        if(majorId != 'all'){
          this.getQuestionBanks(majorId);
        }else{
          this.getQuestionBanks();
        }
      },
      // 获取当前搜索的专业条件
      getMenuCurrentMajorId(){
        if(this.filterMajor.threeLevelMajor != 'all'){
          return this.filterMajor.threeLevelMajor;
        }else{
          if(this.filterMajor.twoLevelMajor != 'all'){
            return this.filterMajor.twoLevelMajor;
          }else{
            if(this.filterMajor.oneLevelMajor != 'all'){
              return this.filterMajor.oneLevelMajor;
            }else{
              return 'all';
            }
          }
        }
      },
      // 头部专业导航
      menuHandle(key,value){
          this.search_parameter = '';
          this.price = '';
          // console.log(key,value);
          this.filterMajor[key] = value;
          if(key == 'oneLevelMajor'){
              this.filterMajor.twoLevelMajor = 'all';
              this.filterMajor.threeLevelMajor = 'all';
          }else if(key == 'twoLevelMajor'){
              this.filterMajor.threeLevelMajor = 'all';
          }
          let majorId = this.getMenuCurrentMajorId();
          if(majorId != 'all'){
            this.getQuestionBanks(majorId);
          }else{
            this.getQuestionBanks();
          }
      },
    /* 获取题库专业列表 */
    async getQuestionBankMajors() {
      this.SET_IS_LOADING(true);
      let result = await getQuestionMajorList();
      if (result && result.data && result.data.code == 200) {
        this.majorList = result.data.data;
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
      }
    },
    /* 获取题库列表 */
    async getQuestionBanks(majorId) {
      this.SET_IS_LOADING(true);
      const { total, page, pageSize } = this.questionBank;
      let params = {
        offset: (page - 1) * pageSize,
        limit: pageSize,
        sort: "id desc",
        isDel: 1
      };
      if(this.search_parameter && this.search_parameter != 'default'){
          params = {
            ...params,
            sort: this.search_parameter
          };
      }
      if(majorId){
          params = {
            ...params,
            majorId: majorId
          };
      }
      let result = await getQuestionBankList(params);
      if (result && result.data && result.data.code == 200) {
        const { rows, total, records } = result.data.data;
        
        this.questionBankList = rows;
        this.questionBank = {
          ...this.questionBank,
          total
        };
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
      }
    },
  },
    
  created() {
      this.getQuestionBankMajors();
      this.getQuestionBanks();
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.question-bank {
  width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  padding-top: 80px;
  padding-bottom: 60px;
  .pagination{
    width: 894px;
    margin-top: 25px;
    text-align: center;
  }
  .clearfix:after,
  .clearfix:before {
    content: "";
    display: table;
  }
  .sort-menu-con {
    width: 1200px;
    background: #fff;
    margin-bottom: 48px;
    // padding: 10px 0;
    .sort-menu-box {
        &:last-child{
            .sort-menu {
                &:last-child{
                    border-bottom: none;
                }
            }
        }
      .sort-menu {
        padding-left: 130px;
        overflow: hidden;
        border-bottom: 1px solid #f2f5fa;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 12px 0 12px 130px;
        position: relative;
        transition: all 1s ease-in-out;
        &::before{
          content: '';
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 12px;
          background: #ffffff;
          z-index: 2;
        }
        .fold{
          position: absolute;
          right: 6px;
          top: 6px;
          cursor: pointer;
          z-index: 2;
        }
        &.max_height{
          max-height: 123px;
        }
        &:first-child{
          padding: 22px 0 12px 130px;
        }
        &:last-child{
          padding: 12px 0 22px 130px;
        }
        .selectd {
          background-color: #f0f2f5;
          border-radius: 4px;
          color: var(--theme-color);
        }
        dt {
          color: #b6b9bf;
          margin-left: -130px;
          // margin-top: 12px;
          // margin-bottom: 12px;
          width: 130px;
          font-size: 14px;
          position: relative;
          z-index: 1;
          text-align: center;
          padding: 8px 10px;
        }
        dd {
          font-size: 14px;
          position: relative;
          z-index: 1;
          color: #656a73;
          margin: 0 6px;
          // margin: 12px 6px;
          margin: 6px 0;
          padding: 8px 10px;
          cursor: pointer;
        }
      }
    }
  }
  .question-container{
      display: flex;
      justify-content: space-between;
      .question-left{
          width: 894px;
          .filter_header{
            font-size: 14px;
            color: #656a73;
            .comprehensive_ranking,.sales_volume{
              cursor: pointer;
              &.selectd{
                color: var(--theme-color);
              }
            }
            .price_high{
              position: relative;
              padding: 0 20px;
              cursor: pointer;
              &.price_desc{
                color: var(--theme-color);
                &::after{
                  border-bottom: 5px solid var(--theme-color);
                }
              }
              &.price_asc{
                color: var(--theme-color);
                &::before{
                  border-top: 5px solid var(--theme-color);
                }
              }
              &::after{
                content: "";
                width: 0;
                height: 0;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                position: absolute;
                right: 8px;
                top: 50%;
                border-bottom: 5px solid #656a73;
                margin-top: -6px;
                cursor: pointer;
              }
              &::before{
                content: "";
                width: 0;
                height: 0;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                position: absolute;
                right: 8px;
                top: 50%;
                border-top: 5px solid #656a73;
                margin-top: 2px;
                cursor: pointer;
              }
            }
          }
          .question_bank_list{
            margin-top: 26px;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            max-height: 1241px;
            overflow: hidden;
          }
      }
      .question-right{
        width: 306px;
        background-color: #ffffff;
      }
  }
}
</style>
